<template>
  <div class="student-growth-container">
    <h2 class="title">德智体美劳</h2>

    <!-- 学生成长数据表格 -->
    <el-table :data="studentGrowths.records" border>
      <el-table-column prop="studentName" label="学生姓名" width="180"></el-table-column>
      <el-table-column prop="moralEducation" label="德育" width="180"></el-table-column>
      <el-table-column prop="intellectualEducation" label="智育" width="180"></el-table-column>
      <el-table-column prop="physicalEducation" label="体育" width="180"></el-table-column>
      <el-table-column prop="aestheticEducation" label="美育" width="180"></el-table-column>
      <el-table-column prop="laborEducation" label="劳育" width="180"></el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="studentGrowths.total"
        @current-change="handlePageChange"
        layout="total, prev, pager, next, jumper"
        class="pagination"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentGrowths: {}, // 存储学生成长数据，包括分页信息
      currentPage: 1,     // 当前页
      pageSize: 5,        // 每页显示数量
    };
  },
  created() {
    this.fetchStudentGrowths(); // 获取学生成长数据
  },
  methods: {
    // 获取学生成长数据
    fetchStudentGrowths() {
      this.$axios
          .get('/student-feedback/student-growths', {
            params: {
              page: this.currentPage,
              size: this.pageSize
            }
          })
          .then((response) => {
            this.studentGrowths = response.data;  // 将返回的分页数据赋值给 studentGrowths
          })
          .catch((error) => {
            this.$message.error('获取成长数据失败');
            console.error(error);
          });
    },
    // 处理分页变化
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchStudentGrowths(); // 在页码变化时重新加载数据
    }
  }
};
</script>

<style scoped>
/* 页面整体容器样式 */
.student-growth-container {
  padding: 20px;
  background-color: #f7f8fa;  /* 页面背景色 */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* 给页面添加阴影 */
}

/* 标题样式 */
.title {
  font-size: 24px;
  font-weight: 600;
  color: #409EFF;
  text-align: center;
  margin-bottom: 20px;
}

/* 表格样式 */
.el-table {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 去除多余的滚动条 */
}

.el-table .el-table__header {
  background-color: #f1f1f1;
  font-weight: bold;
}

.el-table th {
  text-align: center; /* 表头内容居中 */
}

.el-table td {
  text-align: center; /* 表格内容居中 */
  padding: 10px;
}

/* 分页组件样式 */
.pagination {
  margin-top: 20px;
  text-align: center;
  padding: 10px 0;
}

/* 优化按钮样式 */
.el-pagination button {
  background-color: #409EFF;
  border-color: #409EFF;
  color: #fff;
}

.el-pagination button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-pagination .el-pagination__sizes select {
  background-color: #fff;
  border-color: #dcdfe6;
  padding: 5px 10px;
  border-radius: 4px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .el-table-column {
    width: auto; /* 适配小屏幕 */
  }

  .title {
    font-size: 20px;
  }
}
</style>
